/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import { Form, Button, Badge, Radio, Tooltip, DatePicker, Descriptions, Tag, Icon as AIcon, Switch, message } from 'antd';
import { connect } from 'dva';
import forEach from 'lodash/forEach';
import request from '@/utils/request';
import {getTimeDistance, download, formateObjToParamStr, renderMeterStatus} from '@/utils/utils';
import moment from 'moment';
import ReactEcharts from 'echarts-for-react';
import ReactDataGrid from 'react-data-grid';
import find from 'lodash/find';
import max from 'lodash/max';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { Vector } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import Feature from 'ol/Feature';
import { Icon, Style } from 'ol/style';
import Point from 'ol/geom/Point';
import { fromLonLat, toLonLat } from 'ol/proj';
import yali from './../../images/xfs-blue.png';
import yali_red from './../../images/xfs-red.png';
import config from '../../config/config';

//星图地球地图
import { get as getProjection } from 'ol/proj'
import { getTopLeft, getWidth } from 'ol/extent'
import TileGrid from 'ol/tilegrid/TileGrid'
const projection = getProjection('EPSG:3857')
const matrixIds = []
const tileSizePixels = 256
const tileSizeMtrs = getWidth(projection.getExtent()) / tileSizePixels
const resolutions = []
for (let i = 0; i <= 18; i++) {
  matrixIds[i] = i
  resolutions[i] = tileSizeMtrs / Math.pow(2, i)
}
const tileGrid = new TileGrid({
  origin: getTopLeft(projection.getExtent()),
  resolutions: resolutions,
  matrixIds: matrixIds,
})

const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      hydrant_data_export: find(this.permissions, { name: 'hydrant_data_export' }),
      detail: {},
      totalVal: 0,
      showType: 1,
      showType2: 1,
      historyData: [],
      historyData2: [],
      showCustom: false,
      rangePickerValue: [ moment(new Date()).add(-1,'day'), moment(new Date(), 'YYYY-MM-DD')],
      rangePickerValue2: [moment(new Date().getFullYear() + '-' + (parseInt(new Date().getMonth()) + 1) + '-' + '01', 'YYYY-MM-DD'), moment(new Date(), 'YYYY-MM-DD')],
      layers: [
        new TileLayer({
          title: '天地图卫星影像',
          visible: true,
          source: new XYZ({
            // url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b45faf8590f42059eb14fc6065fc9606',
            url: 'https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=6dd3767b369eb5b724937e4ad74b2e78e95ad67ac7bbc1049539cb0691ad6ca2',//星图地球
            tileGrid: tileGrid, // 星图地球指定切片的网格参数
          }),
        }),
        new TileLayer({
          title: '天地图矢量图',
          visible: false,
          source: new XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=b45faf8590f42059eb14fc6065fc9606',
            tileGrid: tileGrid, // 星图地球指定切片的网格参数
          }),
        }),
        new TileLayer({
          title: '卫星标注',
          visible: true,
          source: new XYZ({
            // url: 'http://t4.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b45faf8590f42059eb14fc6065fc9606',
            url: 'https://tiles1.geovisearth.com/base/v1/cia/{z}/{x}/{y}?format=png&tmsIds=w&token=6dd3767b369eb5b724937e4ad74b2e78e95ad67ac7bbc1049539cb0691ad6ca2',//星图地球
            tileGrid: tileGrid, // 星图地球指定切片的网格参数
          }),
        }),
        new TileLayer({
          title: '矢量图标注',
          visible: false,
          source: new XYZ({
            url: 'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=b45faf8590f42059eb14fc6065fc9606',
            tileGrid: tileGrid, // 星图地球指定切片的网格参数
          }),
        }),

      ],
    };
  }

  componentDidMount() {
    const that = this;
    that.fetchDetail();
    that.fetch();
    that.fetch2();

  }

  fetchDetail = () => {
    const that = this;
    request(`/hydrants/${this.props.editRecord.id}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          detail: response.data.data,
        }, function() {
          let pointerLayer = null;
          let map = this.map = new Map({
            target: 'press_sensor_map_view',
            layers: this.state.layers,
            view: new View({
              center: fromLonLat([that.state.detail.longitude,that.state.detail.latitude]),//经纬度
              zoom: 14,
              maxZoom: 21,
              minZoom: 5,
            }),
          });
          let mockvectorSource = that.createApoint(fromLonLat((gcoord.transform(
            [that.state.detail.longitude,that.state.detail.latitude],    // 经纬度坐标
            gcoord.GCJ02,               // 当前坐标系
            gcoord.WGS84                 // 目标坐标系
          ))));
          // 创建标注图层
          pointerLayer = new Vector({
            source: mockvectorSource,
          });
          // 将标注图层添加到地图上
          map.addLayer(pointerLayer);
        });
      }


    });
  };
  createApoint = (coordinate) => {
    let point = new Feature({
      geometry: new Point(coordinate),
      name: '压力传感器',
    });
    //设置图标的样式
    point.setStyle(new Style({
      /**{olx.style.IconOptions}类型*/
      image: new Icon({
        anchorOrigin: 'top-right',
        offsetOrigin: 'top-right',
        src: (this.state.detail.online_status===-1||this.state.detail.alarm===1)?yali_red:yali,
      }),
    }));

    // 创建标注的数据源
    let mockvectorSource = new VectorSource({
      features: [point],
    });
    return mockvectorSource;
  };
  onChangeShowType = e => {
    this.setState({
      showType: e.target.value,
    });
  };
  onChangeShowType2 = e => {
    this.setState({
      showType2: e.target.value,
    });
  };
  isActive(type) {
    const { rangePickerValue } = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return false;
    }
    if (rangePickerValue[0].isSame(value[0], 'day') && rangePickerValue[1].isSame(value[1], 'day')) {
      return true;
    }
  }
  isActive2(type) {
    const { rangePickerValue2 } = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue2[0] || !rangePickerValue2[1]) {
      return false;
    }
    if (rangePickerValue2[0].isSame(value[0], 'day') && rangePickerValue2[1].isSame(value[1], 'day')) {
      return true;
    }
  }
  selectDate = (type) => {
    const that = this;
    this.setState({
      rangePickerValue: getTimeDistance(type),
    }, function() {
      that.fetch();
    });
  };
  selectDate2 = (type) => {
    const that = this;
    this.setState({
      rangePickerValue2: getTimeDistance(type),
    }, function() {
      that.fetch2();
    });
  };
  fetch = (cb) => {
    const that = this;
    request(`/all_hydrant_historical_data`, {
      method: 'GET',
      params: {
        hydrant_ids: `${this.props.editRecord.id}`,
        start_date: that.state.rangePickerValue[0].format('YYYY-MM-DD'),
        end_date: that.state.rangePickerValue[1].format('YYYY-MM-DD'),

      },
    }).then((response) => {
      console.log(response);
      if (response.status === 200) {
        if(response.data.data[0]){
          this.setState({
            historyData: response.data.data[0].items,
          });
        }

      }

    });
  };
  fetch2 = (cb) => {
    const that = this;
    request(`/hydrant_consumption_data`, {
      method: 'GET',
      params: {
        hydrant_id: `${this.props.editRecord.id}`,
        start_date: that.state.rangePickerValue2[0].format('YYYY-MM-DD'),
        end_date: that.state.rangePickerValue2[1].format('YYYY-MM-DD'),

      },
    }).then((response) => {
      console.log(response);
      if (response.status === 200) {
        this.setState({
          historyData2: response.data.data,
          total_consumption:response.data.total_consumption
        });

      }

    });
  };
  getOption = (name,key,color,unit) => {
    const that=this
    const { detail } = this.state;
    const data = this.state.historyData;
    let Date = [];
    let Data = [];
    let diffData = [];
    let errDataIndex = [];
    let warmDataIndex = [];
    let difference_value = 0;
    // forEach(data, (value, index) => {
    //   Date.push(value.collected_at);
    //   Data.push(value[key]);
    // });
    let parseData = data.map((item2, index) => {

      return [(moment(item2.collected_at, "YYYY-MM-DD  HH:mm:ss").diff(moment(that.state.rangePickerValue[0].format('YYYY-MM-DD'), "YYYY-MM-DD  HH:mm:ss"))) / 1000, item2[key]]
    });
    // console.log('parseData',parseData)
    let gridLeft='2%';
    if(name==='压力'){
      gridLeft='2.5%'
    }
    if(name==='累计流量'){
      gridLeft='3.7%'
    }
    if(name==='瞬时流量'){
      gridLeft='2.2%'
    }
    if(name==='温度'){
      gridLeft='4.7%'
    }
    let option = {
      background: 'rgba(0,0,0,1)',
      tooltip: {
        trigger: 'axis',
        formatter: function (datas) {
          var res = ''
          for (var i = 0, length = datas.length; i < length; i++) {
            // console.log('datas[i]',datas[i])
            let time = (moment(that.state.rangePickerValue[0].format('YYYY-MM-DD')).add(datas[i].data[0], 's')).format('MM-DD HH:mm:ss')
            // let time=''
            let value = datas[i].data[1]
            res +=time + '：' +  datas[i].seriesName + '：'
              + value + '<br/>'
          }
          return res
        }
      },
      legend: {
        data: [name],
      },
      xAxis: [
        {
          type: 'value',
          // data: Date,
          axisLabel: {
            showMaxLabel: true,
            formatter: function (value, index) {
              return (moment(that.state.rangePickerValue[0].format('YYYY-MM-DD')).add(value, 's')).format('MM-DD HH:mm:ss')
            }
          },
          axisPointer: {
            type: 'shadow',
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: name,
          axisLabel: {
            formatter: `{value}(${unit})`,
          },
        },
      ],
      grid: {
        top: '12%',
        left: gridLeft,
        right: '2%',
        bottom: '4%',
        containLabel: true,
      },
      dataZoom: [
        {
          type: 'slider',
          show: false,
          xAxisIndex: [0],
        },
        {
          type: 'inside',
          xAxisIndex: [0],
        },
      ],
      series: [
        {
          name: name,
          type: 'line',
          symbolSize: 8,
          data: parseData,
          smooth: true,
          itemStyle: {
            normal: {
              color: color,
            },
          },
          markPoint: {
            symbol: 'rect',
            symbolOffset: [0, -10],
            symbolSize: [1, 1],
            data: [{
              type: 'max',
              name: '最大值',
            },{
              type: 'min',
              name: '最小值',
            },
            ],
          },
        },
      ],
    };
    return option;
  };
  getOption2 = () => {
    const data = this.state.historyData2;
    let Date = [];
    let Data = [];
    let diffData = [];
    let errDataIndex = [];
    let warmDataIndex = [];
    let difference_value = 0;
    forEach(data, (value, index) => {
      Date.push(value.date);
      Data.push(value.value);
      if (value.status !== 1) {
        errDataIndex.push(index);
      }
      diffData.push(value.consumption);
    });

    let option = {
      background: 'rgba(0,0,0,1)',
      color: ['#3398DB', '#fe5810'],
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: [ '用水量'],
      },
      xAxis: [
        {
          type: 'category',
          data: Date,
          axisPointer: {
            type: 'shadow',
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '用水量',
          axisLabel: {
            formatter: '{value}(m3)',
          },
        },
      ],
      grid: {
        top: '12%',
        left: '2%',
        right: '2%',
        bottom: '4%',
        containLabel: true,
      },
      dataZoom: [
        {
          type: 'slider',
          show: false,
          xAxisIndex: [0],
        },
        {
          type: 'inside',
          xAxisIndex: [0],
        },
      ],
      series: [
        {
          name: '用水量',
          type: 'line',
          symbolSize: 8,
          data: diffData,
          smooth: true,
          lineStyle: {
            width: 4
          },
          itemStyle: {
            normal: {
              color: '#ff6e00',
            },
          },
        },
      ],
    };
    return option;
  };

  handleRangePickerChange = (datePickerValue, type) => {
    const that = this;
    if (type === 'start') {
      this.setState({
        rangePickerValue: [datePickerValue, this.state.rangePickerValue[1]],
      }, function() {
        that.fetch();
      });
    } else {
      this.setState({
        rangePickerValue: [this.state.rangePickerValue[0], datePickerValue],
      }, function() {
        that.fetch();
      });
    }
  };
  handleRangePickerChange2 = (datePickerValue, type) => {
    const that = this;
    if (type === 'start') {
      this.setState({
        rangePickerValue2: [datePickerValue, this.state.rangePickerValue2[1]],
      }, function() {
        that.fetch2();
      });
    } else {
      this.setState({
        rangePickerValue2: [this.state.rangePickerValue2[0], datePickerValue],
      }, function() {
        that.fetch2();
      });
    }
  };
  renderStatus = (val) => {
    let type = '';
    let color = '';
    let text = '';
    switch (val) {
      case 1:
        return <p className={'table-status table-success'}>在线</p>
        break;
      case -1:
        return <p className={'table-status table-error'}>离线</p>
        break;
      default:
        type = 'close-circle', color = '#eb2f96', text = '异常';
        break;
    }
    return <Fragment> <AIcon type={type} theme="twoTone" className="table-icon" twoToneColor={color}/>{text}</Fragment>;
  };
  renderAlaarmStatus = (val) => {
    let type = '';
    let color = '';
    let text = '';
    switch (val) {
      case 1:
        return <p className={'table-status table-error'}>报警</p>
        break;
      case -1:
        return <p className={'table-status table-success'}>不报警</p>
        break;
      default:
        type = 'close-circle', color = '#eb2f96', text = '异常';
        break;
    }
    return <Fragment> <AIcon type={type} theme="twoTone" className="table-icon" twoToneColor={color}/>{text}</Fragment>;
  };
  renderValueStatus = (val) => {
    let status = 'success';
    let explain = '';
    switch (val) {
      case -4:
        status = 'error';
        explain = '错报';
        break;
      case -3:
        status = 'warning';
        explain = '抄表失败';
        break;
      case -2:
        status = 'warning';
        explain = '漏报';
        break;
      case -1:
        status = 'warning';
        explain = '未上报';
        break;
      default:
        status = 'success';
        explain = '正常';
    }
    return (
      <p>
        <Badge status={status}/>{explain}
      </p>
    );
  };
  renderPressStatus= (val) => {
    let status = 'success';
    let explain = '';
    switch (val) {
      case 4:
        status = 'error';
        explain = '压力传感器故障';
        break;
      case 2:
        status = 'warning';
        explain = '压力高于上限阀值';
        break;
      case 1:
        status = 'warning';
        explain = '压力低于下限阀值';
        break;
      case 0:
        status = 'success';
        explain = '压力正常';
        break;
      default:
        status = 'warning';
        explain = '未知';
    }
    return (
      <p>
        <Badge status={status}/>{explain}
      </p>
    );
  };
  renderF=(val)=>{
    let txt=''
    console.log('val',val);
    switch (Number(val)) {
      case 1:
        txt = '每天1次';
        break;
      case 2:
        txt = '每天2次';
        break;
      case 3:
        txt = '每天4次';
        break;
      case 4:
        txt = '每3小时1次';
        break;
      case 5:
        txt = '每两小时1次';
        break;
      case 6:
        txt = '每1小时1次';
        break;
      case 7:
        txt = '每半小时1次';
        break;
      default:
        txt = '';
    }
    return txt

  }
  handleExport=()=>{
    const payload= {
      hydrant_id:this.props.editRecord.id,
      start_date:this.state.rangePickerValue[0].format("YYYY-MM-DD"),
      end_date:this.state.rangePickerValue[1].format("YYYY-MM-DD"),
    }
    download(`${config.prefix}/hydrant_historical_data_files?Authorization=Bearer ${sessionStorage.getItem('token')}&${formateObjToParamStr(payload)}`)
  }
  handleExport2=()=>{
    const that=this;
    let searchParams={
      hydrant_id: `${this.props.editRecord.id}`,
      start_date: that.state.rangePickerValue2[0].format('YYYY-MM-DD'),
      end_date: that.state.rangePickerValue2[1].format('YYYY-MM-DD'),
    }
    console.log('searchParams',searchParams)
    download(`${config.prefix}/hydrant_consumption_data_files?Authorization=Bearer ${sessionStorage.getItem('token')}&order_direction=desc&order_column=number&${formateObjToParamStr(searchParams)}`)

  }
  render() {
    const defaultColumnProperties = {
      resizable: true,
    };
    const columns = [
      {
        name: '时间',
        width: 165,
        key: 'collected_at',
      },
      {
        name: '压力(mpa)',
        width: 140,
        key: 'pressure',
        formatter: (event) => {
          return <p style={{width:'100%',textAlign:'right'}}>{event.value}</p>;
        }
      },
      {
        name: '累计流量(m³)',
        width: 140,
        key: 'cumulative_flow',
        formatter: (event) => {
          return <p style={{width:'100%',textAlign:'right'}}>{event.value}</p>;
        }
      },
      {
        name: '瞬时流量(m³/h)',
        width: 140,
        key: 'instantaneous_flow',
        formatter: (event) => {
          return <p style={{width:'100%',textAlign:'right'}}>{event.value}</p>;
        }
      },
      {
        name: '温度(℃)',
        width: 165,
        key: 'temperature',
        formatter: (event) => {
          return <p style={{width:'100%',textAlign:'right'}}>{event.value}</p>;
        }
      },
    ].map(c => ({ ...defaultColumnProperties, ...c }));
    const columns2 = [
      {
        name: '日期',
        width: 100,
        key: 'date',
      },
      {
        name: '状态',
        width: 150,
        key: 'status',
        formatter: (event) => {
          return this.renderValueStatus(event.value);
        },
      },
      {
        name: '用水量(m3)',
        width: 150,
        key: 'consumption',
      },
      {
        name: '累计流量(m3)',
        width: 150,
        key: 'value',
      },
      {
        name: '累计流量(原始)',
        width: 202,
        key: 'original_value'
      },
    ].map(c => ({...defaultColumnProperties, ...c}));

    const { detail } = this.state;
    const reverceData = [...this.state.historyData].reverse();
    const reverceData2 = [...this.state.historyData2].reverse();
    return (
      <div>
        <Descriptions column={4} title={<div>
          <span>消防栓基本信息</span>
        </div>} bordered>
          <Descriptions.Item label="编号" span={2}> <Tooltip
            title={detail.number}>{detail.number}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="资产编号" span={2}> <Tooltip
            title={detail.name}>{detail.name}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="用户编号" span={2}> <Tooltip
            title={detail.user_number}>{detail.user_number}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="安装地址" span={2}><Tooltip
            title={detail.address}>{detail.address}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="在线状态"  span={2}>{this.renderStatus(detail.online_status)}</Descriptions.Item>
          <Descriptions.Item label="报警状态"  span={2}>{this.renderAlaarmStatus(detail.alarm)}</Descriptions.Item>
          <Descriptions.Item label="设备类型"  span={2}>{detail.type===1?'非取水栓':'取水栓'}</Descriptions.Item>
          <Descriptions.Item label="IMEI" span={2}> <Tooltip
            title={detail.name}>{detail.imei}</Tooltip></Descriptions.Item>

          <Descriptions.Item label="经度" span={2}>{detail.longitude}</Descriptions.Item>
          <Descriptions.Item label="纬度" span={2}>{detail.latitude}</Descriptions.Item>
          <Descriptions.Item label="创建时间" span={2}>{detail.created_at}</Descriptions.Item>
          <Descriptions.Item label="标高" span={2}>{detail.elevation}</Descriptions.Item>
          <Descriptions.Item label="描述" span={4}>{detail.description}</Descriptions.Item>
        </Descriptions>
        <div id="press_sensor_map_view" style={{width:'100%',height:'300px',marginBottom:'10px'}}></div>
        <Descriptions column={4} title={<div>
          <span>消防栓数据</span>
        </div>} bordered>
          <Descriptions.Item label="表计状态" span={4}>

            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              renderMeterStatus(detail.latest_data.rtu.parameters.meter_status):''}
          </Descriptions.Item>
          <Descriptions.Item label="压力" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters.pressure+`(${ detail.latest_data.rtu.parameters.pressure_unit})`):''}
          </Descriptions.Item>
          <Descriptions.Item label="压力报警阀值" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters.alarm_pressure):''}
          </Descriptions.Item>
          <Descriptions.Item label="瞬时流量" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters.instantaneous_flow+`(${ detail.latest_data.rtu.parameters.instantaneous_flow_unit})`):''}
          </Descriptions.Item>
          <Descriptions.Item label="当前累计流量" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters. cumulative_flow+`(${ detail.latest_data.rtu.parameters. cumulative_flow_unit})`):''}
          </Descriptions.Item>

          <Descriptions.Item label="温度" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters.temperature+`(${ detail.latest_data.rtu.parameters.temperature_unit})`):''}
           </Descriptions.Item>
          <Descriptions.Item label="温度报警阀值" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters.alarm_temperature):''}
          </Descriptions.Item>
          <Descriptions.Item label="基站信息Cell_ID" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters.base_station_id):''}
          </Descriptions.Item>

          <Descriptions.Item label="电池电压" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters.battery_voltage)+`(${detail.latest_data.rtu.parameters.battery_voltage_unit})`:''}
          </Descriptions.Item>
          <Descriptions.Item label=" 冻结周期" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters.freeze_cycle+'(分钟)'):''}
          </Descriptions.Item>
          <Descriptions.Item label="冻结条数" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters. freeze_number):''}
          </Descriptions.Item>
          <Descriptions.Item label="IM卡ICCID" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters. iccid):''}
          </Descriptions.Item>
          <Descriptions.Item label="信号覆盖等级" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters. signal_leve):''}
          </Descriptions.Item>
          <Descriptions.Item label="信号强度" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters. signal_strength):''}
          </Descriptions.Item>
          <Descriptions.Item label="信噪比SNR" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters. snr):''}
          </Descriptions.Item>
          <Descriptions.Item label="上传周期" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters. upload_cycle):''}
          </Descriptions.Item>
          <Descriptions.Item label="上传类型" span={2}>
          {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
            (detail.latest_data.rtu.parameters.upload_type):''}
        </Descriptions.Item>
          <Descriptions.Item label="版本号" span={2}>
            {(detail.latest_data&&detail.latest_data.rtu&&detail.latest_data.rtu.parameters)?
              (detail.latest_data.rtu.parameters. version):''}
          </Descriptions.Item>
        </Descriptions>


        <h3 className={'ant-descriptions-title'} style={{marginTop: '18px'}}>
          消防栓用水量
          <Radio.Group onChange={this.onChangeShowType2} style={{marginLeft: '10px'}} value={this.state.showType2}>
            <Radio value={1}>折线图</Radio>
            <Radio value={2}>表格</Radio>
          </Radio.Group>
        </h3>
        <div>
          <ButtonGroup>
            <Button onClick={() => this.selectDate2('month')} type={this.isActive2('month') ? 'primary' : ''}>本月</Button>
            <Button onClick={() => this.selectDate2('year')} type={this.isActive2('year') ? 'primary' : ''}>本年</Button>
          </ButtonGroup>

          <DatePicker
            value={this.state.rangePickerValue2[0]}
            allowClear={false}
            format="YYYY-MM-DD"
            style={{width: 150}}
            placeholder={'开始日期'}
            onChange={(e) => this.handleRangePickerChange2(e, 'start')}
          />
          <DatePicker
            allowClear={false}
            value={this.state.rangePickerValue2[1]}
            format="YYYY-MM-DD"
            placeholder={'结束日期'}
            style={{width: 150}}
            onChange={(e) => this.handleRangePickerChange2(e, 'end')}
          />
          <Button
            style={{marginLeft:'8px'}}
            className={'btn-green'}
            type="primary"
            icon="export"
            onClick={this.handleExport2}
          >导出用水量
          </Button>
          <br/>
          <span
            style={{ fontWeight: 'bold', fontSize: '18px'}}>当前时间范围用水量: {this.state.total_consumption}(m3)</span>
        </div>
        <div style={{height: '320px', marginTop: '10px'}}>
          {
            this.state.showType2 === 1 ?
              <Fragment>
                <ReactEcharts
                  option={this.getOption2()}
                  style={{height: '280px', width: '100%'}}
                  theme="my_theme"
                  //onChartReady={this.onChartReadyCallback}
                  //onEvents={EventsDict}
                />
              </Fragment> : <ReactDataGrid
                columns={columns2}
                rowGetter={i => reverceData2[i]}
                rowsCount={reverceData2.length}
                minHeight={300}
              />
          }
          {/* {
            find(this.permissions, {name: 'meter_data_export'}) &&
            <Tooltip title={'导出前请先选择上方时间段'}>
              <Button block icon="export" type="primary"
                      style={{marginTop: '10px'}}
                      onClick={this.handleExport}
              >导出水表读数</Button>
            </Tooltip>
          } */}

        </div>



        <h3 className={'ant-descriptions-title'} style={{ marginTop: '18px' }}>消防栓历史参数
          <Radio.Group onChange={this.onChangeShowType} style={{ marginLeft: '10px' }} value={this.state.showType}>
            <Radio value={1}>折线图</Radio>
            <Radio value={2}>表格</Radio>
          </Radio.Group>
        </h3>
        <div>
          <ButtonGroup>
            <Button onClick={() => this.selectDate('month')} type={this.isActive('month') ? 'primary' : ''}>本月</Button>
            <Button onClick={() => this.selectDate('year')} type={this.isActive('year') ? 'primary' : ''}>本年</Button>
          </ButtonGroup>

          <DatePicker
            value={this.state.rangePickerValue[0]}
            allowClear={false}
            format="YYYY-MM-DD"
            style={{ width: 150 }}
            placeholder={'开始日期'}
            onChange={(e) => this.handleRangePickerChange(e, 'start')}
          />
          <DatePicker
            allowClear={false}
            value={this.state.rangePickerValue[1]}
            format="YYYY-MM-DD"
            placeholder={'结束日期'}
            style={{ width: 150 }}
            onChange={(e) => this.handleRangePickerChange(e, 'end')}
          />
          {
            this.state.hydrant_data_export&&
            <Button type={'primary'} style={{float:'right'}} onClick={this.handleExport}>导出当前数据</Button>
          }

        </div>
        <div style={{ height: '1200', marginTop: '10px' }}>
          {
            this.state.showType === 1 ?
              <Fragment>
                <ReactEcharts
                  option={this.getOption('压力','pressure','#1f58ff','MPa')}
                  style={{ height: '300px', width: '100%'}}
                  theme='my_theme'
                  //onChartReady={this.onChartReadyCallback}
                  //onEvents={EventsDict}
                />
                <ReactEcharts
                  option={this.getOption('累计流量','cumulative_flow','#ff0090','m³')}
                  style={{ height: '300px', width: '100%'}}
                  theme='my_theme'
                  //onChartReady={this.onChartReadyCallback}
                  //onEvents={EventsDict}
                />
                <ReactEcharts
                  option={this.getOption('瞬时流量','instantaneous_flow','#19d705','m³/h')}
                  style={{ height: '300px', width: '100%'}}
                  theme='my_theme'
                  //onChartReady={this.onChartReadyCallback}
                  //onEvents={EventsDict}
                />
                <ReactEcharts
                  option={this.getOption('温度','temperature','#ffd230','℃')}
                  style={{ height: '300px', width: '100%'}}
                  theme='my_theme'
                  //onChartReady={this.onChartReadyCallback}
                  //onEvents={EventsDict}
                />

              </Fragment> : <ReactDataGrid
                columns={columns}
                rowGetter={i => reverceData[i]}
                rowsCount={reverceData.length}
                minHeight={1200}
              />
          }
        </div>
        <div style={{height:'10px'}}></div>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
